<template>
	<view class="content">
		<view class="contet-img">
			<image class="contet-imgs" mode="widthFix" @click="handleCodeClick"
				:src="url1">
			</image>
		</view>
		<!-- btn -->
		<view class="btn">
			<uv-btn @click="handleCodeClick" background="#25AEA2" text="扫码充电" :loading="loading"
				loading-text="请稍后..."></uv-btn>
		</view>
		<view class="top-border">

		</view>
		<view class="aside" v-if="list.length >0">
			<view class="aside-view aside-left">
				<image class="aside-img" mode="widthFix"
					:src="url2">
				</image>
				输入端口号充电
			</view>
			<view class="aside-view　aside-right" 　>
				输入充电端口二维码后四位

			</view>
		</view>
		<view class="top" v-if="list.length >0">
			<view class="top-wrap">
				<view class="enter">
					<u-message-input @finish="handleFinish" width="140" active-color="#0DA297" :maxlength="4"
						inactive-color="#0DA297"></u-message-input>
				</view>
			</view>
		</view>
		<view class="top-title top-title-02" v-if="list.length >0">
			<view>请选择您所在社区</view>
		</view>
		<view class="list" v-if="list.length >0">
			<view class="item" v-for="(item,i) in list" :key="i" @click="handleListClick(i)">
				<view class="item-title">{{item.community}}</view>
				<view :class="{'item-choose':true,'active':currentIndex==i}">{{item.button}}</view>
			</view>
		</view>
		<!-- <view class="bottom-safe-area"></view> -->
		<!--btn-->
		<!-- <view class="btn-wrap">
			<view class="btn">
				<uv-btn @click="handleCodeClick" background="#F54949" text="扫码充电" :loading="loading"
					loading-text="请稍后..."></uv-btn>
			</view>
			<view class="bottom-safe-area"></view>
		</view> -->

		<common-drag />
	</view>
</template>
<script>
	export default {
		data() {
			return {
				port: null,
				list: [],
				currentIndex: null,
				loading: false,
				url1:this.$imgUrl +'charge/Scanning.png',
				url2:this.$imgUrl+'charge/slice.png',
				
			}
		},
		onLoad() {
			this.getRecentCharge();
		},
		watch: {
			//监听输入的值是否是四位
			port: {
				handler(newVal, olVlue) {
					if (newVal && newVal.length == 4 && newVal != olVlue) {
						this.getListRequest();
					}
				},
				immediate: true
			}
		},
		methods: {

			//近期充电列表
			getRecentCharge() {
				this.$u.api.getRecentCharge().then(res => {
					if (res.result_code == '1000') {
						this.list = res.data;
					};
				});
			},
			handleFinish(value) {
				this.port = value;
				/* 	this.getListRequest(); */
			},
			//Scan code to charge
			handleCodeClick() {
				uni.scanCode({
					success: (res) => {

						if (res.result) {
							let url = res.result;
							//1.设备码类
							let isEquipment1 = this.$utils.getQueryStringByName(url, 's') ? true : false;
							let isEquipment2 = url.indexOf('?') == '-1' ? true : false;
							//2.其余皆走活动种类

							if (isEquipment1 || isEquipment2) {
								this.loading = true;
								//1.设备码类型：
								this.$u.api.portOpen({
									str: url,
								}).then(res => {
									uni.setStorageSync('scanCodeUrl', url);
									this.loading = false;
									if (res.result_code == '300') {

										this.$u.vuex('maintain_phone', res.data.operator_phone);
										//跳转
										this._jumpPage(res.data, url, true);
									} else {
										this.$utils.modal({
											title: '温馨提示',
											content: res.msg,
											showCancel: false
										});
									};
								}).catch(() => {
									this.loading = false;
								});
							} else {
								//2.活动码类型：

								let fan = this.$utils.getQueryStringByName(url, 'ha') || '';
								this.$u.api.getCodeActivity({
									qrcode: url,
								}).then(res => {
									this.loading = false;
									if (res.result_code == '500') {

										if (fan) {

											this.$utils.modal({
												title: '温馨提示',
												content: res.msg,
												showCancel: false
											});
										} else {
										this.$utils.jumpWebview(res.data.url);
											/* uni.navigateTo({
												url: '/pages/webview/index?url=' + encodeURIComponent(JSON.stringify(res.data.url))
											}); */
										};

									} else {
										this.$utils.modal({
											title: '温馨提示',
											content: res.msg,
											showCancel: false,
											callback: (bool) => {

											}
										});
									};
								}).catch(() => {
									this.loading = false;
								});
							}
						}

					}
				});
			},
			//port number charging
			handleListClick(i) {
				this.currentIndex = i;
				this.$utils.modal({
					title: '开启端口',
					content: '是否确认开启该社区端口？',
					callback: (bool) => {
						if (bool) {
							let str = this.list[i].scan;
							uni.setStorageSync('scanCodeUrl', str);
							this.$u.api.portOpen({
								str,

							}).then(res => {
								//reset
								this.port = null;
								this.currentIndex = null;
								if (res.result_code == '300') {
									//向缓存中存入运维电话
									this.$u.vuex('maintain_phone', res.data.operator_phone);
									//跳转
									this._jumpPage(res.data, str, true);
								} else {
									this.$utils.toast(res.msg);
								};
							}).catch(() => {
								//reset
								this.port = null;
								this.currentIndex = null;
							});
						} else {
							//reset
							this.port = null;
							this.currentIndex = null;
						};
					}
				});
			},
			getListRequest() {
				this.$u.api.getPortList({
					code: this.port,
				}).then(res => {
					//判断该社区有充电桩存在就赋值
					if (res.data && Array.isArray(res.data)) {
						this.list = res.data;
						//收起键盘
						uni.hideKeyboard();
					} else {
						this.$utils.toast(res.msg);
					};
				});
			},
			//跳转到时长选择页面
			_jumpPage(data, str, isScanCode) {
				//缓存数据并跳转
				try {
					uni.setStorageSync('mainStr', str);
					uni.setStorage({
						key: 'coreData',
						data,
						success: () => {
							let is_scan_code = isScanCode ? 1 : 0;
							uni.redirectTo({
								url: '/pages/charge/start?is_scan_code=' + is_scan_code
							});
						}
					});
				} catch (e) {
					// error
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top {
		overflow: hidden;
		width: 100%;
		border-radius: 0 0 3000px 3000px / 0 0 300px 300px;
	}
	.content {
		position: relative;
		/* padding-top:450rpx; */
	}

	.top {
		/* position:fixed;
		left:0;
		top:0; */
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
		overflow: hidden;
	}

	.top-wrap {
		padding: 30rpx 40rpx;
		/* border-bottom: 16rpx solid #f9fbfc; */
	}

	.top-title>view {
		line-height: 32rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
	}

	.top-title-02 {
		padding: 40rpx 40rpx;

	}

	.enter {
		padding: 30rpx 0;
		padding-bottom: 20rpx;
	}

	.btn {
		margin: 20rpx auto 0;
		width: 70%;
	}

	.btn-wrap {
		position: fixed;
		left: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 20rpx 40rpx;
		width: 100%;
		background-color: #fff;
	}

	.list {
		padding: 0 40rpx;
		padding-bottom: 130rpx;
	}

	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 110rpx;
		border-top: 1px solid #e5e5e5;
		padding: 10rpx 0;
	}

	.item-choose {
		padding: 0 10rpx;
		/* width:126rpx; */
		height: 44rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 28rpx;
		color: #0da297;
		border: 1px solid #0da297;
		border-radius: 22rpx;
		margin-left: 10rpx;
	}

	.item-title {
		flex: 1;
		line-height: 44rpx;
		font-size: 30rpx;
	}

	.item-choose.active {
		color: #fff;
		background-color: #0da297;
	}

	.contet-img {
		margin: 30rpx auto 0;
		width: 250rpx;
	}

	.contet-imgs {
		width: 250rpx;
		height: 250rpx;
	}

	.top-border {
		margin-top: 50rpx;
		width: 100%;
		height: 20rpx;
		background: #EFEFEF;
	}

	.aside {
		margin-top: 30rpx;
	}

	.aside-view {
		display: inline-block;
		width: 50%;
	}

	.aside-img {
		float: left;
		margin-right: 10rpx;
		width: 42rpx;
		height: 42rpx;
	}

	.aside-left {
		padding-left: 20rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #111111;
	}

	.aside-right {
		font-size: 24rpx;
		font-weight: 500;
		color: #FF4949;
	}
</style>
<style>
	page {
		background-color: #fff;
	}
</style>